<template>
	<view class="content">
		<!-- 电量显示栏-->
		<view class="top_nav">
			<view class="kong"></view>
			<view class="tab_item">
				<view class="return" @click="returnPage">
					<image src="https://jialianxin-1301053941.cos.ap-chengdu.myqcloud.com/static/course/jiantou.png"></image>
				</view>
				<view class="title">无卡支付详情</view>
				<view class="return"></view>
			</view>
		</view>
		
		<!-- 无卡支付详情 -->
		<view class="no_card_detail">
			<view class="no_card_title">
				<view class="title_left">交易金额</view>
				<view class="title_right">￥0.5</view>
			</view>
			<view class="no_card_wrap">
				<view class="nocard_item">
					<view class="item_left">交易类型</view>
					<view class="item_right">余额</view>
				</view>
				<view class="nocard_item">
					<view class="item_left">卡号</view>
					<view class="item_right">8393030228282929</view>
				</view>
				<view class="nocard_item">
					<view class="item_left">发卡行</view>
					<view class="item_right">8292929</view>
				</view>
				<view class="nocard_item">
					<view class="item_left">凭证号</view>
					<view class="item_right">7282992</view>
				</view>
				<view class="nocard_item">
					<view class="item_left">参考号</view>
					<view class="item_right">9193833</view>
				</view>
				<view class="nocard_item">
					<view class="item_left">时间</view>
					<view class="item_right">2020-08-22 17:22:26</view>
				</view>
				<view class="nocard_item">
					<view class="item_left">状态</view>
					<view class="item_right1">交易超时</view>
				</view>
				<view class="nocard_item">
					<view class="item_left">签名</view>
					<view class="item_right1">已签名</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			}
		},
		methods: {
			returnPage(){
				uni.navigateBack({
					delta:1
				})
			}
		}
	}
</script>

<style lang="scss">
page{
	width: 100%;
	height: 100%;
	background: #f2f2f2;
}
.content{
	width: 100%;
	position: relative;
	.top_nav{
		width: 100%;
		height: 200upx;
		background-image: url('https://jialianxin-1301053941.cos.ap-chengdu.myqcloud.com/static/buy/1.png');
		background-size: cover;
		position: fixed;
		top: 0;
		left: 0;
		z-index: 10;
		.kong{
			width: 100%;
			height: 60upx;
		}
		.tab_item{
			width: 90%;
			margin: 0 auto;
			height: 140upx;
			display: flex;
			align-items: center;
			justify-content: center;
			.return{
				flex: 1;
				width: 100%;
				image{
					width: 29upx;
					height: 29upx;
				}
			}
			.title{
				flex: 8;
				width: 100%;
				color: #ffffff;
				display: flex;
				align-items: center;
				justify-content: center;
				z-index: 10;
			}
		}
	}
	.no_card_detail{
		width: 100%;
		padding-top: 200upx;
		background: #FFFFFF;
		.no_card_title{
			width: 90%;
			margin: 0 auto;
			height: 120upx;
			border-bottom: 4upx dashed #ededed;
			display: flex;
			align-items: center;
			.title_left{
				flex: 1;
				color: #aaaaaa;
			}
			.title_right{
				flex: 1;
				text-align: right;
				font-size: 34upx;
				font-weight: bold;
			}
		}
		.no_card_wrap{
			width: 100%;
			padding: 30upx;
			.nocard_item{
				width: 100%;
				height: 80upx;
				display: flex;
				align-items: center;
				color: #aaaaaa;
				.item_left{
					flex: 1;
				}
				.item_right{
					flex: 2;
					text-align: right;
				}
				.item_right1{
					flex: 2;
					text-align: right;
					color: #da251c;
				}
			}
		}
	}
}
</style>
